<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-sclae=1.0,user-scalable=0">
	<title>在线客服</title>
	<script type="text/javascript" src="../../js/flexible.js"></script>
	<link rel="stylesheet" type="text/css" href="css/base.css">
	<link rel="stylesheet" type="text/css" href="../../css/flex.css">
	<script type="text/javascript" src="../../js/h5.min.js"></script>
	<script type="text/javascript" src="js/base.js"></script>
</head>
<body>
	<div class="index" flex="dir:top main:justify">
		<!-- 广播 -->
		<div class="radio" flex="cross:center">
			<img src="images/radio.png" class="icon">
			<div class="scrollW">
			  	<ul>
			    	<li>
			      		<a href="">
			      			UA融易发，呼朋唤友赚钱花，点击了解。
			      		</a>
			    	</li>
			    	<li>
			      		<a href="">
			      			UA融易发，呼朋唤友赚钱花，点击了解。
			      		</a>
			    	</li>
			  	</ul>
			</div>
		</div>
		<!-- tab切换 -->
		<ul class="tab" flex="main:center" flex-box="0">
			<li class="active"><a href="index.html">人工服务</a></li><li><a href="message.html">留言回复</a></li>
		</ul>
		<!-- 聊天界面 -->
		<div class="talk" flex-box="1">
			<div class="queryHistory">
				<div class="cont" flex="main:center cross:center" style="margin: 0 auto;">
					<img src="images/query.png">
					<font onclick="tip('没做')">查看历史消息</font>
				</div>
			</div>
			<ul>
				<li class="customer" flex="main:center cross:top box:first">
					<img src="images/pic_head.png" class="pic_head">
					<div class="text">
						<p class="p1">小融易<span class="time">2017/05/14 17:03:04</span></p>
						<p class="p2">我是color，你想干哈</p>
					</div>
				</li>
			</ul>
		</div>
		<!-- 底部模块 -->
		<div class="sendBox">
			<!-- 输入面板 -->
			<div class="tool" flex="main:justify cross:center">
				<div class="add" flex="">
					<img src="images/add.png" class="img" flex-box="0" id="add">
					<div class="list">
						<ul flex="main:center">
							<li><img src="images/pic.png"><br>相片</li>
							<li><img src="images/camera.png"><br>拍摄</li>
							<li id="markBtn" style="cursor:pointer;display: inline-block;"><img src="images/mark.png" style="cursor:pointer;"><br>评分</li>
						</ul>
					</div>
				</div>
				<img src="images/emoji.png" class="emoji img" id="emoji" flex-box="0">
				<div class="input" contenteditable="true" flex-box="1"></div>
				<img src="images/send.png" onclick="sendMessage()" class="send img" flex-box="0">
			</div>
			<!-- 表情包 -->
			<div class="emoji_swiper swiperW">
				<ul class="swiper">
					<li class="item">
						<p></p>
					</li>
					<li class="item">
						<p></p>
					</li>
				</ul>
			</div>
			<!-- 评分弹窗 -->
			<div class="markPop">
				<div class="cont">
					<div class="title" flex="cross:center box:first">
						<img src="images/close.png" id="markClose">
						<font>评价客服</font>
					</div>
					<div class="text">
						<p class="p1 cen">请您为本次服务进行评价</p>
						<p class="p2 cen">
							<span class="yes"></span>
							<span class="yes"></span>
							<span class="yes"></span>
							<span></span>
						</p>
						<p class="p3 cen">满意</p>
					</div>
					<p class="btnW">
						<a href="javascript:;" class="btn">提交</a>
					</p>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="../../js/swiper.min.js"></script>
	<script type="text/javascript">
        // 弹出相片、拍摄、评价
        $('#add').on('click',function(){
        	var list=$(this).next('.list');
        	if(list.css('display')=="none"){
        		list.show();
        		$(this).attr('src','images/add2.png');
        	}else{
        		list.hide();
        		$(this).attr('src','images/add.png');
        	}
        });
        // 添加表情
        var emojiImg=emojiImg1=emojiImg2="";
       	for(var i=1;i<41;i++){
       		if(i<10){
       			emojiImg=emojiImg+"<img src='images/sina/0"+i+".png'>";
       		}else{
       			emojiImg=emojiImg+"<img src='images/sina/"+i+".png'>";
       		}
       		if(i<27){
       			emojiImg1=emojiImg;
       		}
       		if(i==26){
       			emojiImg="";
       		}
       		if(i<41){
       			emojiImg2=emojiImg;
       		}
       	}
       	$('.emoji_swiper .swiper li').eq(0).find('p').append(emojiImg1);
       	$('.emoji_swiper .swiper li').eq(1).find('p').append(emojiImg2);
       	// 点击显示隐藏表情框
       	var flag=true;
       	$('#emoji').on('click',function(){
       		if($('.emoji_swiper').css('display')=="none"){
        		$('.emoji_swiper').show();
        		$('.talk')[0].scrollTop=$('.talk')[0].scrollHeight;
        	}else{
        		$('.emoji_swiper').hide();
        	}
       		// 表情包轮播
			if(flag){
				var swiper = new Swiper({
		            container:'.swiperW .swiper',
		            cir:'.cir', //circle圆点div类名
		            direction: 'horizontal' //horizontal
		        });
		        flag=false;
			}
       	});
       	// 添加清除按钮
       	var clearObj='<font class="clear"></font>';
       	$('.emoji_swiper .swiper li p').each(function(){
       		$(this).append(clearObj);
       	});
       	$('.clear').on('click',function(){
       		$('.tool .input').html('');
       	});
       	// 发送消息
       	function sendMessage(){
       		var val=$('.sendBox .tool .input').html();
       		var txt='<li class="me" flex="main:center cross:top box:last"><div class="text"><p class="p1">上帝<span class="time">2017/05/14 17:03:04</span></p><div flex="main:right"><div class="p2">'+val+'</div></div></div><img src="images/pic_head.png" class="pic_head"></li>';
       		$('.talk ul').append(txt);
       		$('.sendBox .tool .input').html('');
       		$('.talk')[0].scrollTop=$('.talk')[0].scrollHeight;
       	}
        $(function(){
			// 点击表情加入到输入框内
			$('.emoji_swiper li p img').on('click',function(){
				var imgV=this.cloneNode(true);
				$('.tool .input').append(imgV);
			});
			// 评分
			$('#markBtn').on('click',function(){
				$('.markPop').show();
				$('.sendBox .tool .input').attr('contenteditable',false);
			});
			$('#markClose').on('click',function(){
				$('.sendBox .tool .input').attr('contenteditable',true);
				$('.markPop').hide();
			});
			function light(ind){
				$('.markPop .text .p2 span').each(function(){
					if($(this).index()<ind+1){
						$(this).addClass('yes');
					}else{
						$(this).removeClass('yes');
					}
				});
			}
			$('.markPop .text .p2 span').on('click',function(){
				var ind=$(this).index();
				light(ind);
				if($('.markPop .text .p2 span.yes').length==1){
					$('.markPop .text .p3').html('不满意');
				}else if($('.markPop .text .p2 span.yes').length==2){
					$('.markPop .text .p3').html('一般');
				}else if($('.markPop .text .p2 span.yes').length==3){
					$('.markPop .text .p3').html('满意');
				}else if($('.markPop .text .p2 span.yes').length==4){
					$('.markPop .text .p3').html('非常满意');
				}
			});
		});
	</script>
</body>
</html>